<template>
  <div class="wrap-outer">
    <common-head title="分类页"></common-head>
    <div class="content">
      <div class="slider-left">
        <div class="index1">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item :title="item.name" v-for="item in cates" :key="item.id" @click="toCateItem(item.id)"/>
          </van-sidebar>
        </div>
      </div>
      <div class="slider-right">
        <div class="wrap" v-for="item in goods" :key="item.id" @click="toDetails(item.id)">
          <div class="left">
            <img :src="item.pic" alt />
          </div>
          <div class="right">
            <h2>{{item.name}}</h2>
            <p class="dis">{{item.characteristic ? item.characteristic: '' | filterDes}}</p>
            <div class="price">
              <div class="price-text">&yen;{{item.minPrice}}</div>
              <van-icon class-prefix="icon" name="gouwuche" size="24"></van-icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    <tabbar />
  </div>
</template>

<script>
import Tabbar from '@components/Tabbar'
import CommonHead from '@components/CommonHead'
import { fetchCates, fetchGoods } from '@api'
export default {
  components: {
    Tabbar,
    CommonHead
  },
  data () {
    return {
      activeKey: 0,
      cates: [],
      goods: []
    }
  },
  filters: {
    // 商品描述自定义长度和...
    filterDes (val) {
      if (val.length >= 10) {
        return val.substr(0, 10) + '...'
      } else {
        return val
      }
    }
  },
  created () {
    this.getCate()
    this.toCateItem()
  },
  methods: {
    // 获取商品分类数据
    getCate (id) {
      fetchCates({
        id
      }).then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    // 点击侧边栏渲染相同categoryId的商品
    toCateItem (id) {
      fetchGoods({
        categoryId: id
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.goods = res.data.data.result
        }
        // 不符合就清空数组，防止下面的页面渲染上一个有数据的页面
        if (res.data.code === 700) {
          this.goods = []
        }
      })
    },
    toDetails (id) {
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap-outer {
  .content {
    display: flex;
    .slider-left {
      position: fixed;
      top: 46px;
      left: 0;
      bottom: 50px;
      height: 100%;
      overflow-y: auto;
      .index1 {
        padding-bottom: 100px;
      }
    }
    .slider-right {
      position: absolute;
      top: 46px;
      left: 80px;
      overflow-y: auto;
      box-sizing: border-box;
      flex: 1;
      padding-bottom: 50px;
      .wrap {
        background-color: #fff;
        display: flex;
        border: 1px solid #ccc;
        .left {
          img {
            width: 120px;
            height: 120px;
            display: block;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          color: #555;
          flex: 1;
          padding: 15px 20px;
          h2 {
            font-size: 18px;
            font-weight: bold;
            color: blue;
          }
          .dis {
            flex: 1;
            padding-top: 25px;
          }
          .price {
            display: flex;
            align-items: center;
            .price-text {
              padding-top: 8px;
              font-size: 18px;
              color: red;
              font-weight: bold;
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>
